<template>
  <div class="tmpl">
    <div class="conment">
      <div class="time">{{th | decade}} </div>
      <div class="time">:</div>
      <div class="time">{{tm | decade}}</div>
      <div class="time">:</div>
      <div class="time">{{ts | decade}}</div>
    </div>
  </div>
</template>

<script type="text/javascript">
export default{
  data(){
    return {
      th: 0,
      tm: 0,
      ts: 0
    }
  },
  methods: {
    inval(){
      var _this = this;
      setInterval(function(){
        _this.ts++;
        if(_this.ts == 60){
          _this.ts = 0;
          _this.tm++
          if(_this.tm == 60){
            _this.tm =0;
          }
        }

      },600);

    }
  },
  created(){
    this.inval();
  },
  filters: {
    decade: function(value){
      if(value < 10){
        return "0" + value;
      }else{
        return value;
      }
    }
  },
}
</script>

<style type="text/css" scoped>
  .tmpl{
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .tmpl .time{
    float: left;
    padding: 5px;
  }
  .tmpl .time:nth-child(1),.tmpl .time:nth-child(3),.tmpl .time:nth-child(5){
    border: 1px solid #333;
    border-radius: 5px;
  }
  .conment{
    overflow: hidden;
  }
</style>










